<template>
	<view class='select-station' :class="(sortStatus || areaStatus) ? 'tl-show': ''">
       <view class="header_top">
		   <view class="u-search flex-item">
			  <u-icon name="search" color='#777'></u-icon>
			  <text>搜索车检站</text>
		   </view>
		   <view class='screen  flex-item'>
			   <view class="screen-item"  @click="areaStatus = !areaStatus; sortStatus = false;">{{city}} <text class="iconfont icon-arrow-down"></text></view>
			   <view class="screen-item"  @click="sortStatus = !sortStatus; areaStatus = false;">{{sortTxt}}<text class="iconfont icon-arrow-down"></text></view>
		   </view>
	   </view>
	   <template>
			<view class='list-warpper' v-if="list.length > 0">
			   <view class="list-item flex-item" @click="toDetail(item.id)" v-for='(item,index) in list' :key='index'>
				   <image class='l-img' :src="item.img" mode=""></image>
				   <view class="r-content">
						<view class="title">{{item.title}}</view>
						<view class='desc'>{{item.desc}}</view>
						<view class="flex-item" style="margin: 10rpx 0;">
							<view class="f-status">{{item.status == 1 ? '自营' : '门店'}}</view>
							<view class="f-sale">已售{{item.sale}}</view>
						</view>
						<view class="flex-item flex-between">
							<view>
								<text class="f-type" v-for='(sitem,sindex) in item.type' :key='sindex'>{{sitem}}</text>
							</view>
							<view class="distance">距离 {{item.distance}}</view>
						</view>
				   </view>
			   </view>
			   <view class="underline">--- {{tip}} ---</view>
			</view>
			<u-empty class="u-empty" v-else mode="data"></u-empty>
	   </template>
	   <u-back-top :scroll-top="scrollTop"></u-back-top>
	    <!-- 智能排序弹层 -->
	    <view class="sort-wrapper" v-if="sortStatus">
		   <view class='sort-box'>
			   <view v-for="(item,index) in sortList" :key='index' @click="selectSort(item,index)">
				   <view class='sort-item flex-item flex-between' :class="{'sortactive':sortIndex == index}">
					   <view>{{item.name}}</view>
					    <view v-if='item.showicon'><u-icon name="checkbox-mark" size='20' color='#3891D8'></u-icon></view>
				   </view>
			   </view>
		   </view>
	    </view>
		<!-- 地址选择弹层 -->
		<view class="sort-wrapper" v-if="areaStatus">
		    <view class='sort-box area-box flex-item'>
				<!-- Left -->
			    <view class="left-bar">
				    <view v-for="(item,index) in areaList" :key='index' @click="selectArea(item,index)">
					    <view class='sort-item' :class="{'area-active':areaIndex == index}">
						   <view>{{item.name}}</view>
					    </view>
				    </view>
			    </view>
				<!-- Right -->
				<view class="right-content">
					<view v-for="(item,index) in itemList" :key='index' @click="selectItem(item,index)">
					    <view class='sort-item' :class="{'item-ctive':itemIndex == index}">
						   <view>{{item.val}}</view>
					    </view>
					</view>
				</view>
		    </view>
		</view>
	</view>
</template>

<script>
	var index1,index2;
	export default {
		data(){
			return{
				city:'北京市',
				sortTxt:'智能排序',
				sortStatus:false,
				areaStatus:false,
				sortList:[
					{
						name:'智能排序',
						showicon:true
					},
					{
						name:'离我最近',
						showicon:false
					},
					{
						name:'销量最高',
						showicon:false
					}
				],
				sortIndex:0,
				areaList:[
					{
						type:1,
						name:'附近'
					},
					{
						type:2,
						name:'区域'
					},
				],
				itemList:[],
				list1:[
					{
						id:1,
						val:'5km'
					},
					{
						id:2,
						val:'15km'
					},
					{
						id:3,
						val:'25km'
					},
					{
						id:4,
						val:'35km'
					},
				],
				list2:[
					{
						id:1,
						val:'朝阳区'
					},
					{
						id:2,
						val:'东城区'
					},
					{
						id:3,
						val:'西城区'
					},
					{
						id:4,
						val:'丰台区'
					},
					{
						id:5,
						val:'石景山区'
					},
					{
						id:6,
						val:'海淀区'
					},
					{
						id:7,
						val:'大兴区'
					},
					{
						id:8,
						val:'房山区'
					},
					{
						id:1,
						val:'朝阳区'
					},
					{
						id:2,
						val:'东城区'
					},
					{
						id:3,
						val:'西城区'
					},
					{
						id:4,
						val:'丰台区'
					},
					{
						id:5,
						val:'石景山区'
					},
					{
						id:6,
						val:'海淀区'
					},
					{
						id:7,
						val:'大兴区'
					},
					{
						id:8,
						val:'房山区'
					},
				],
				itemIndex:-1,
				areaIndex:0,
				typeFlg:1,
				tip:'我是有底线的',
				scrollTop: 0,
				list:[
					{
						id:1,
						img:'/static/home/09.png',
						title:'安徽省驾驶机动车检测有限责任公司有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:12,
						type:['安','环','综'],
						distance:'20km',
						status:1
					},
					{
						id:2,
						img:'/static/home/08.png',
						title:'安徽省驾驶机动车检测有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:30,
						type:['安','环','综'],
						distance:'20km',
						status:0
					},
					{
						id:3,
						img:'/static/home/07.png',
						title:'安徽省驾驶机动车检测有限责任公司有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:120,
						type:['安','环','综'],
						distance:'20km',
						status:1
					},
					{
						id:4,
						img:'/static/home/06.png',
						title:'安徽省驾驶机动车检测有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:30,
						type:['环','综'],
						distance:'25km',
						status:0
					},
					{
						id:5,
						img:'/static/home/05.png',
						title:'安徽省驾驶机动车检测有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:40,
						type:['安','综'],
						distance:'50km',
						status:1
					},
					{
						id:6,
						img:'/static/home/04.png',
						title:'安徽省驾驶机动车检测有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:40,
						type:['安','综'],
						distance:'50km',
						status:1
					},
					{
						id:5,
						img:'/static/home/03.png',
						title:'安徽省驾驶机动车检测有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:40,
						type:['安','综'],
						distance:'50km',
						status:1
					},
					{
						id:5,
						img:'/static/home/02.png',
						title:'安徽省驾驶机动车检测有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:40,
						type:['安','综'],
						distance:'50km',
						status:1
					},
					{
						id:5,
						img:'/static/home/01.png',
						title:'安徽省驾驶机动车检测有限责任公司',
						desc:'安徽省合肥市蜀山区驾驶机动车检测有限责任公司是个什么寄吧检测公司啊',
						sale:40,
						type:['安','综'],
						distance:'50km',
						status:1
					}
				]
			}
		},
		onLoad() {
			this.itemList = this.list1;
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			/*
			* 智能排序选择
			*/
			selectSort(l,i){
				let vm = this;
				vm.sortIndex = i;
				vm.sortTxt = vm.sortList[i].name;
				vm.sortList.map(item => {
					return item.showicon = false;
				});
				vm.sortList[i].showicon = true;
				vm.sortStatus = !vm.sortStatus;
			},
			/*
			* 区域选择
			*/
			selectArea(l,i){
				let vm = this;
				vm.typeFlg = l.type;
				vm.areaIndex = i;
				l.type == 1 ? (vm.itemList = vm.list1,vm.itemIndex = index1) : (vm.itemList = vm.list2,vm.itemIndex = index2);
			},
			/*
			* 具体选择
			*/
			selectItem(l,i){
				let vm = this;
				vm.itemIndex = i;
				vm.city = l.val;
				vm.areaStatus = !vm.areaStatus;
				vm.typeFlg == 1 ? index1 = i : index2 = i;//存对应选择的类 index
			},
			toDetail(id){
				uni.navigateTo({
					url:`/pages/pagesA/home/detail?cid=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.underline{
		font-size: 12px;
		text-align: center;
		padding: 10px 0;
		color: #777;
	}
	.u-empty{
		position: absolute;
		top: 50%;left:50%;
		transform: translateX(-50%);
	}
	.u-search u-icon{
		margin-right: 10rpx;
	}
	.icon-arrow-down{
		position: relative;
		font-size: 24rpx;
		left: 5rpx;
	}
	.header_top{
		position: fixed;
		width: 100%;
		top: 0;
		z-index:9;
		background: #FFF;
		padding: 30rpx 25rpx 0 25rpx;
		border-bottom: 2rpx solid #eee;
		box-shadow: 0rpx 0rpx 20rpx 0rpx #eee;
	}
	.flex-item{
		display: flex;
		align-items: center;
	}
	.flex-between{
		justify-content: space-between;
	}
	.u-search{
		font-size: 24rpx;
		background: #F5F5F5;
		color: #777;
		border-radius: 50rpx;
		padding: 8rpx 0 8rpx 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx #ccc;
	}
	.screen{
		margin: 25rpx 0;
	}
	.screen-item{
		width: 33.333%;
		font-size: 24rpx;
	}
	.list-warpper{
		padding: 180rpx 0 40rpx 0;
	}
	.l-img{
		width: 160rpx;
		height: 160rpx;
		border-radius: 10rpx;
	}
	.r-content{
		flex:1;
		margin-left: 20rpx;
	}
	.list-item{
		padding:20rpx;
		border-bottom: 1px solid #eee;
	}
	.title{
		font-size: 30rpx;
		color: #000;
		font-weight: bold;
	}
	.desc{
		color: #777;
		font-size: 24rpx;
	}
	.desc,.title{
		width: 500rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
	}
	.f-status,.f-sale,.f-type{
		color: #7C9AEF;
		border: 2rpx solid #7C9AEF;
		padding: 0 10rpx;
		border-radius: 10rpx;
		font-size: 20rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}
	.f-sale{
		background-color: #eee;
		color: #999;
		border: none;
		font-weight: normal;
	}
	.f-type{
		background: orange;
		color: #FFF;
		padding: 3rpx 6rpx;
		border: none;
		font-weight: normal;
	}
	.distance{
		color: #ccc;
		font-size: 24rpx;
	}
	.sort-wrapper{
		position: fixed;
		width: 100%;
		top: 180rpx;
		bottom: 0;
		background: rgba(7,17,27,.2);
		z-index: 8;
	}
	.sort-box{
		background: #F0F4F8;
		padding:20rpx 0 100rpx 0;
	}
	.sort-item{
		padding: 15rpx 25rpx;
	}
	.sortactive,.item-ctive,.area-active{
		color:#3891D8;
	}
	.area-active{
		background: #FFF;
	}
	.area-box{
		align-items: flex-start;
		padding: 0;
		height: 60vh;
	}
	.left-bar{
		text-align: center;
		width: 200rpx;
	}
	.right-content{
		flex:1;
		background: #FFF;
		height: 100%;
		overflow-y: scroll;
	}
	/**
	 * 打开弹窗禁止页面滑动兼容
	 */
	.tl-show{
	  overflow: hidden;
	  position:fixed;
	  height: 100%;
	  width: 100%;
	}
</style>